<template>
  <div class="OnlineDetail">
    <div class="ele-title-1">
      <h4>订单详情</h4>
    </div>
    <div class="ele-title-2">
      <h3 v-if="orderType==0">状态:待付款</h3>
      <h3 v-if="orderType==1">状态:待预约</h3>
      <h3 v-if="orderType==2">状态:待接单</h3>
      <h3 v-if="orderType==3">状态:待服务</h3>
      <h3 v-if="orderType==4">状态:服务中</h3>
      <h3 v-if="orderType==5">状态:已完成</h3>
      <h3 v-if="orderType==8">状态:<span style="color:red">超时未服务</span></h3>
      <h3 v-if="orderType==7">状态:已关闭</h3>
    </div>
    <div class="ele-div-1">
      <div class="div-left">
        <p><span>订单号:{{ orderCode }}</span><span>交易号:{{ transactionCode }}</span></p>
        <p>下单时间:{{ orderTime }}</p>
      </div>
    </div>
    <div class="ele-div-2">
      <el-col :span="6" class="marginSpace"><span class="div-span">买家:</span><span>{{ buyer }}</span></el-col>
      <el-col :span="6" class="marginSpace"><span class="div-span">手机号:</span> <span>{{ phone }}</span></el-col>
      <el-col :span="6" class="marginSpace"><span class="div-span">支付方式:</span> <span>{{ payment }}</span></el-col>
      <el-col :span="6" class="marginSpace"><span class="div-span">支付金额: </span><span>{{ payAmount }}</span></el-col>
      <el-col :span="6" class="marginSpace"><span class="div-span">备注:</span>{{ remark }}</el-col>
    </div>
    <!-- 待付款 -->
    <div v-if="orderType==0" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <p>
          <span class="fontweight">订单状态:</span><span class="fontColor">待付款</span>
        </p>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
      </div>
    </div>
    <!-- 待预约 -->
    <div v-if="orderType==1" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span class="fontColor">待预约</span>
            </p>
            <div>
              <!--              <el-button
                type="primary"
                @click="changeHandle"
              >分配医生</el-button>-->
              <el-button type="primary" plain @click="cancelOrder">取消订单</el-button>
              <!--              <el-button type="primary" plain @click="finishOrder">完成</el-button>-->
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 待接单-->
    <div v-if="orderType==2" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span class="fontColor">待接单</span>
            </p>
            <div>
              <el-button type="primary" @click="changeHandle">分配医生</el-button>
              <el-button type="primary" plain @click="cancelOrder">取消订单</el-button>
              <!--              <el-button type="primary" plain @click="finishOrder">完成</el-button>-->
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>这是一段描述文字</span><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 待服务-->
    <div v-if="orderType==3" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span class="fontColor">待服务</span>
            </p>
            <div>
              <el-button type="primary" @click="changeHandle">重新分配医生</el-button>
              <el-button type="primary" plain @click="cancelOrder">取消订单</el-button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 服务中-->
    <div v-if="orderType==4" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span class="fontColor">服务中</span>
            </p>
            <div>
              <el-button type="primary" @click="finishOrder">完成服务</el-button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>

    <!-- 已完成 -->
    <div v-if="orderType==5" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span class="fontColor">已完成</span>
            </p>
            <div>
              <!--              <p><b>服务评分:</b></p>
              <p class="Rate-number"><span>2.30</span></p>
              <div class="marginRight">
                <span>处理速度分</span><el-Rate
                  value="4"
                  :texts="['非常差', '差评', '一般', '非常好', '满意']"
                  :disabled="false"
                  show-text
                />
              </div>
              <div class="marginRight">
                <span>服务态度分</span><el-Rate
                  value="1"
                  :texts="['非常差', '差评', '一般', '非常好', '满意']"
                  :disabled="false"
                  show-text
                />
              </div>
              <div class="marginRight">
                <span>处理结果分</span><el-rate
                  value="2"
                  :texts="['非常差', '差评', '一般', '非常好', '满意']"
                  :disabled="false"
                  show-text
                />
              </div>-->
              <div class="cus-image">
                <p class="fontColor"><span>{{ description }}</span></p>
                <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
                  <div v-if="!item" slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 超时未服务-->
    <div v-if="orderType==8" class="ele-div-3">
      <div>
        <p>
          <span class="fontweight">服务:</span><span class="fontColor">{{ service }}</span>
        </p>
        <p>
          <span class="fontweight">单价:</span><span class="fontColor">{{ price }}</span>
        </p>
        <p>
          <span class="fontweight">优惠:</span><span class="fontColor">{{ discount }}</span>
        </p>
        <div class="bottom">
          <div class="footer">
            <p>
              <span class="fontweight">订单状态:</span><span style="color: red">超时未服务</span>
            </p>
            <div>
              <el-button type="primary" @click="changeHandle">重新分配医生</el-button>
              <el-button type="primary" plain @click="cancelOrder">取消订单</el-button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <p><span class="fontweight">医生服务信息</span></p>
        <p class="fontColor"><span>服务科室:</span><span>{{ department }}</span></p>
        <p class="fontColor"><span>服务医生:</span><span>{{ doctor }}</span></p>
      </div>
      <div>
        <p><span class="fontweight">预约信息</span></p>
        <p class="fontColor"><span>预约服务时间:</span><span>{{ appointmentTime }}</span></p>
      </div>
      <div class="Ap-last">
        <p><span class="fontweight">咨询描述</span></p>
        <p class="fontColor"><span>{{ description }}</span></p>
        <div class="cus-image">
          <el-image v-for="(item,index) in describeImgs" :key="index" :src="item">
            <div v-if="!item" slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 选择医生 -->
    <el-dialog :visible.sync="visible_0" class="cus-dialog" :modal="false">
      <div slot="title">
        <b>选择医生</b>
      </div>
      <div class="dia-keysearch">
        <el-form :model="formData" class="ele-form">
          <el-row>
            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" plain @click="refreshDoctor">全部</el-button>
              </el-form-item>
            </el-col>

            <!--            <el-col :span="3">
              <el-form-item>
                <el-select v-model="formData.address.shengId" @change="getCityListByid">
                  <el-option v-for="(item,index) in address.provinceList" :key="index" :value="index" :label="item.province.name" /></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-select v-model="formData.address.shiId" @change="getCityInfoByid">
                  <el-option v-for="(item,index) in address.cityList" :key="index" :value="index" :label="item.city.name" /> </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="8">
              <el-form-item label="科室">
                <el-cascader
                  v-model="formData.department"
                  placeholder="服务科室"
                  class="ele-cascader"
                  :options="departmentOptions"
                  clearable
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-input
                  v-model="formData.keywords"
                  placeholder="输入名称搜索"
                  suffix-icon="el-icon-search"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" @click="getList">确认</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-button type="primary" plain @click="addOrderDoctor">添加医生</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" plain @click="refreshDoctor">刷新</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="dia-table">
        <el-table :data="Bindata">
          <el-table-column prop="doctorName" label="医生名称" />
          <el-table-column prop="city" label="城市" />
          <el-table-column prop="hospitalName" label="医院" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="primary"
                class="deleteBtn"
                @click="handleSelect(scope.row)"
              >选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <div />
          <el-pagination
            :current-page="page.pageIndex"
            :page-sizes="[15, 20, 25, 30]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getID } from '@/utils/auth'
import { departmentList, doctorList } from '@/api/service'
import { cancleServiceOrder, distributeDoctor, finishOrder, onlineOrderDetail } from '@/api/order'

export default {
  name: 'OnlineDetail',
  data() {
    return {
      orderId: '',
      orderType: '',
      orderCode: '',
      transactionCode: '',
      orderTime: '',
      buyer: '',
      phone: '',
      payment: '',
      payAmount: '',
      remark: '',
      serviceId: '',
      service: '',
      price: '',
      discount: '',
      department: '————',
      departmentId: '',
      doctorid: '',
      doctor: '————',
      appointmentTime: '————',
      description: '',
      visible_0: false,
      // 分页
      page: {
        pageSize: 20,
        pageIndex: 1,
        total: 0
      },
      departmentOptions: [],
      describeImgs: [],
      formData: {
        department: null,
        departmentId: null
      },
      Bindata: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const params = this.$dd(this.$route.query.p)
      console.log(params)
      this.orderType = params.status
      this.orderId = params.rows.id
      /* const loadingInstance = Loading.service({ fullscreen: true })*/
      onlineOrderDetail({ orderId: params.rows.id }).then(res => {
        /* loadingInstance.close()*/
        this.orderCode = res.data.data.serviceOrderInfo.orderSn
        this.transactionCode = res.data.data.serviceOrderInfo.subId
        this.orderTime = res.data.data.serviceOrderInfo.created
        this.buyer = res.data.data.buyingLeadsInfo.userName
        this.phone = res.data.data.buyingLeadsInfo.userPhone
        this.payment = res.data.data.buyingLeadsInfo.payType
        this.payAmount = res.data.data.buyingLeadsInfo.orderPrice
        this.remark = res.data.data.buyingLeadsInfo.note
        this.service = res.data.data.serviceMessage.serviceName
        this.price = res.data.data.serviceMessage.price
        this.discount = res.data.data.serviceMessage.preferential
        if (res.data.data.serviceMessage.doctorInformation) {
          console.log(res.data.data.serviceMessage.doctorInformation)
          this.department = res.data.data.serviceMessage.doctorInformation.departmentName
          this.formData.departmentId = res.data.data.serviceMessage.doctorInformation.departmentId
          this.doctor = res.data.data.serviceMessage.doctorInformation.doctorName
          this.appointmentTime = res.data.data.serviceMessage.serviceSubscribe.time
          if (res.data.data.serviceMessage.serviceUserDescribe.describeImgs.length > 0) {
            this.describeImgs = res.data.data.serviceMessage.serviceUserDescribe.describeImgs
          }

          console.log(this.describeImgs)
        }
      })
      /* .catch(err =>{
        /!*loadingInstance.close()*!/
        this.$message.success('获取服务订单详情失败')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      })*/
      /* this.service = '制氧机咨询服务'
      this.price = '￥19.9'
      this.discount = '——'
      this.department = '——'
      this.doctor = '———'
      this.appointmentTime = '————'*/
      const departmentData = {
        shopId: localStorage.getItem('shopId'),
        page: 1,
        limit: 0
      }
      departmentList(departmentData).then(response => {
        console.log(response.data.data)
        const departmentList = response.data.data.data
        departmentList.forEach(item => {
          const label = {
            value: item.id,
            label: item.name
          }
          this.departmentOptions.push(label)
        })
      })
    },
    sizeChange(e) {
      this.page.pageSize = e
    },
    currentChange(e) {
      this.page.pageIndex = e
    },
    // 变更医生
    changeHandle() {
      this.visible_0 = !this.visible_0
      this.dialogVisible = true
      this.departmentId = this.$route.query.departmentId
      this.formData.department = this.formData.departmentId
      const data = {
        shopId: localStorage.getItem('shopId'),
        keyword: this.formData.keywords,
        department: this.formData.departmentId,
        page: this.page.pageIndex,
        limit: this.page.pageSize
      }
      doctorList(data).then(res => {
        this.Bindata = res.data.data.data
        this.page.total = res.data.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    addOrderDoctor() {
      this.$router.push({ name: 'addDoctor' })
    },
    refreshDoctor() {
      this.formData.keywords = ''
      this.formData.departmentId = ''
      const data = {
        shopId: localStorage.getItem('shopId'),
        keyword: this.formData.keywords,
        department: this.formData.departmentId,
        page: this.page.pageIndex,
        limit: this.page.pageSize
      }
      doctorList(data).then(response => {
        this.Bindata = response.data.data.data
        this.total = response.data.data.total
      }).catch(() => {
        this.Bindata = []
        this.total = 0
      })
    },
    getList() {
      const data = {
        shopId: localStorage.getItem('shopId'),
        keyword: this.formData.keywords,
        department: this.formData.departmentId,
        page: this.page.pageIndex,
        limit: this.page.pageSize
      }
      doctorList(data).then(response => {
        this.Bindata = response.data.data.data
        this.total = response.data.data.total
      }).catch(() => {
        this.Bindata = []
        this.total = 0
      })
    },
    handleSelect(row) {
      this.doctorid = row.id
      console.log(this.orderId)
      const data = {
        doctorId: this.doctorid,
        serviceOderId: this.orderId
      }
      distributeDoctor(data).then(response => {
        console.log(response.data.data)
        this.visible_0 = false
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$message.success('分配成功')
        this.$router.go(-1)
      })
    },
    cancelOrder() {
      this.$confirm('是否取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancleServiceOrder({ id: this.orderId }).then(response => {
          this.$notify.success({
            title: '成功',
            message: '取消订单成功'
          })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1)
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '取消订单异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '成功',
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    finishOrder() {
      this.$confirm('是否完成订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        finishOrder({ orderId: this.orderId, userId: getID() }).then(response => {
          this.$notify.success({
            title: '成功',
            message: '完成订单成功'
          })
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.go(-1)
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '完成订单异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '成功',
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.OnlineDetail {
  .fontweight {
    font-weight: bold;
  }
  .fontColor {
    color: gray;
  }
  background: white;
  padding: 50px 40px;
  .ele-title-1,
  .ele-title-2 {
    width: 100%;
  }
  .ele-div-1 {
    width: 100%;
    padding: 20px 0px;
    .div-left {
      width: 50%;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding-left: 20px;
      font-size: 18px;
      p {
        span:first-child {
          margin-right: 60px;
          color: gray;
        }
      }
    }
  }
  .ele-div-2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 18px;
    margin-top: 50px;
    padding: 0px 100px 0px 20px;
    background: #F7F7F7;
    border-radius: 10px;
    .marginSpace{
      margin: 20px 0;
    }
    .div-span {
      margin-right: 10px;
    }
  }
  .ele-div-3 {
    border: 1px solid #e6e6e6;
    padding: 20px 40px;
    font-size: 18px;
    margin-top: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .bottom {
      margin-top: 100px;
      .footer {
        .Rate-number {
          font-size: 3rem;
          color: orange;
          margin: 0px;
        }
        .marginRight {
          display: flex;
          // align-items: center;
          margin: 20px 0px;
          span {
            margin-right: 30px;
          }
        }
      }
    }
    .Ap-last {
      width: 350px;
    }
    .cus-image {
      width: 350px;
      ::v-deep.el-image {
        width: 100px;
        height: 100px;
        background: #F7F7F7;
        margin: 5px;
        .image-slot {
          line-height: 100px;
          text-align: center;
          font-size: 25px;
        }
      }
    }
  }
  .cus-dialog {
    .dia-keysearch {
      width: 100%;
      .el-form {
        .el-row > .el-col {
          margin-right: 15px;
        }
      }
    }
    .dia-table {
      .pagination {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
